<template>
    <div id="module">
        <!-- 左侧导航 -->
        <el-container>
            <Nav :isCollapse="isCollapse" />
            <!-- 左侧导航 end -->
            <el-container>
                <!-- 头部 -->
                <el-header class="d-flex j-sb">
                    <!-- 面包屑 -->
                    <Breadcrumb @changeCollapse="changeCollapse" :isCollapse="isCollapse" />
                    <!-- 用户下拉操作 -->
                    <div class="el_icon d-flex j-sa">
                        <div class="el_icon_item">
                            <i class="iconfont icon-gitee2"></i>
                        </div>
                        <div class="el_icon_item">
                            <i class="el-icon-unlock"></i>
                        </div>
                        <div class="el_icon_item">
                            <i :class="isFullscreen? 'iconfont icon-screen-restore' : 'iconfont icon-screen-full'"></i>
                        </div>
                        <!-- <div class="el_icon_item">
                            <el-badge :value="3" class="item">
                                <i class="iconfont icon-bell"></i>
                            </el-badge>
                        </div> -->

                        <div class="el_icon_item">
                            <el-popover placement="left" width="330" trigger="click">
                                <!-- <el-tabs v-model="activeName" @tab-click="handleClick"></el-tabs> -->
                                <el-tabs v-model="activeName">
                                    <el-tab-pane label="用户管理" name="first">
                                        <div class="ele-notice-list ele-scrollbar-mini">
                                            <div class="ele-notice-item">
                                                <div class="ele-notice-item-wrapper">
                                                    <div class="ele-cell ele-cell-align-top">
                                                        <div class="ele-cell-content ele-elip">半岛弥音的请假审批</div>
                                                        <span class="el-tag el-tag--info el-tag--mini el-tag--light"> 未开始 </span>
                                                    </div>
                                                    <div class="ele-text-secondary ele-elip">半岛弥音在 07-27 18:30 提交的请假申请</div>
                                                </div>
                                                <div class="el-divider el-divider--horizontal">
                                                    <!---->
                                                </div>
                                            </div>
                                            <div class="ele-notice-item">

                                                <div class="ele-notice-item-wrapper">
                                                    <div class="ele-cell ele-cell-align-top">
                                                        <div class="ele-cell-content ele-elip">半岛弥音的请假审批</div>
                                                        <span class="el-tag el-tag--info el-tag--mini el-tag--light"> 未开始 </span>
                                                    </div>
                                                    <div class="ele-text-secondary ele-elip">半岛弥音在 07-27 18:30 提交的请假申请</div>
                                                </div>
                                                <div class="el-divider el-divider--horizontal">
                                                    <!---->
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>

                                </el-tabs>

                                <el-badge slot="reference" :value="3" class="item">
                                    <i class="iconfont icon-bell"></i>
                                </el-badge>
                            </el-popover>
                            <!-- <el-badge :value="3" class="item">
                                <i class="iconfont icon-bell"></i>
                            </el-badge> -->
                            <!-- 消息通知框 -->
                            <!-- <div class="notice_bell">
                                
                            </div> -->
                        </div>
                        <div class="el_icon_item">
                            <el-dropdown size="small" class="exit" @command="handleCommand">
                                <span class="el-dropdown-link">
                                    <el-avatar size="small" :src="avatar"></el-avatar>
                                    <i class="el-icon-arrow-down"></i>
                                </span>

                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item icon="el-icon-user" command="a">个人中心</el-dropdown-item>
                                    <el-dropdown-item icon="el-icon-key" command="b">修改密码</el-dropdown-item>
                                    <el-dropdown-item icon="el-icon-switch-button" command="c">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                </el-header>
                <Tabs></Tabs>
                <!-- 主体 -->

                <el-main class="main">
                    <!-- <keep-alive> -->
                    <transition name="fade-transform" mode="out-in">
                        <router-view :key="$route.fullPath"></router-view>
                    </transition>
                    <!-- </keep-alive> -->
                </el-main>

            </el-container>
        </el-container>
        <el-drawer title="消息通知" :visible.sync="drawer" :with-header="false">

        </el-drawer>

    </div>
</template>

<script>
    import Nav from '_c/left-nav' //引入左侧导航组件
    import Breadcrumb from '_c/breadcrumb' //引入面包屑组件
    import Tabs from '_c/tabs' //引入面包屑组件
    import { mapState } from 'vuex'

    export default {
        name: 'App',
        components: {
            Nav,
            Breadcrumb,
            Tabs,
        },
        data() {
            return {
                activeName: 'first',
                isCollapse: true,
                drawer: false,
                mg_name: '',
                card_id: '超级管理员',
                isFullscreen: false,
            }
        },
        computed: {
            ...mapState({
                name: state => state.loginModule.manager_info.mg_name,
                avatar: state => state.loginModule.manager_info.avatar,
            }),
        },
        created() {
            this.log()
        },
        methods: {
            changeCollapse() {
                this.isCollapse = !this.isCollapse
            },
            // 获取用户名
            log() {
                const mg_name = this.$store.state.loginModule.manager_info.token
                console.log(mg_name)
                this.mg_name = mg_name
            },
            //窗口弹窗
            //退出弹窗
            handleCommand(command) {
                if (command == 'c') {
                    this.$confirm('您真的要离开吗, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    })
                        .then(() => {
                            this.$message({
                                message: '退出成功',
                                type: 'success',
                            })

                            // 清空token
                            // sessionStorage.removeItem("token");
                            window.localStorage.clear()
                            this.$router.push('/login')
                        })
                        .catch(() => {
                            this.$message({
                                message: '已取消退出操作',
                            })
                        })
                } else if (command == 'b') this.$message('click on item ')
            },
        },
    }
</script>

<style scoped>
    .el-dropdown {
        display: block;
    }
    .el-dropdown-menu--small .el-dropdown-menu__item {
        line-height: 32px;
        padding: 0 22px;
        font-size: 12px;
    }
</style>
